<template>
  <div>

    <h2 align="left">品类管理</h2>

    <h3 align="left">查询条件</h3>

    <!-- 查询表单 -->
    <el-form :inline="true" :model="selectForm" class="demo-form-inline">

      <el-form-item label="一级品类">
        <el-select v-model="selectForm.productTypeId" placeholder="一级品类">
          <el-option v-for="item in productTypes" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="创建时间">
        <el-date-picker
          v-model="selectForm.begin"
          type="datetime"
          placeholder="选择日期时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="至">
        <el-date-picker
          v-model="selectForm.end"
          type="datetime"
          placeholder="选择日期时间">
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="getInfoList">查询</el-button>
      </el-form-item>
    </el-form>

    <el-row>
      <el-col :span="24">
        <el-button type="success" @click="add">新增</el-button>
        <el-button type="danger" @click="deleteMul">下架</el-button>
      </el-col>
    </el-row>

    <el-table
      :data="productTypes"
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection">
      </el-table-column>
      <el-table-column
        prop="id"
        label="品类ID">
      </el-table-column>
      <el-table-column
        prop="name"
        label="品类名称">
      </el-table-column>
      <el-table-column
        prop="priority"
        label="顺序"
        sortable>
      </el-table-column>
      <el-table-column
        prop="subClasses.name"
        :formatter="subClassesNames"
        label="子品类">
      </el-table-column>
      <el-table-column
        prop="createdTime"
        label="创建时间"
        sortable>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="detail(scope.$index)">查看</el-button>
          <el-button type="text" size="small" @click="updateRow(scope.$index)">编辑</el-button>
          <el-button type="text" size="small" @click="deleteRow(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
import axios from "axios";
import {getList} from "@/api/ProductType";
export default {
  name: "ProductType",
  data() {
    return {
      currentPage: 1,
      currentSize: 5,
      selectForm: {
        currentPage: 1,
        pageSize: 5,
        productTypeId: '',
        begin: '',
        end : ''
      },

      productTypes: [{
        name: '11',
        id: '1',
        subClasses: [{
          name: "123"
        }, {
          name: "456"
        }]
      }, {
        name: '22',
        id: '2'
      }, {
        name: '33',
        id: '3'
      }, {
        name: '44',
        id: '4'
      }],
      multipleSelection: []
    }
  },
  async created() {
    await this.getInfoList()
  },
  methods: {
    async getInfoList() {
      const res = await getList(this.selectForm)
      if (res.code == 200) {
        this.datas = res.data.list;
      }
    },
    /*load: function () {
      axios.get('productType/list', {
        params: {
          currentPage: this.currentPage,
          pageSize: this.currentSize,
          productTypeId: this.productTypeId,
          createTime: this.createTime
        }
      }).then((res) => {
        this.totalRows = res.data.total;
        this.datas = res.data.list;
      }).catch((error) => {
        console.log(error);
      });
    },*/
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    subClassesNames: function (row) {
      let names = [];
      row.subClasses.forEach((item, index) => {
        names.push(item.name + '; ');
      });
      return names;
    },
    detail: function (index) {
      let id = this.productTypes[index].id;
      this.$router.push({
        path: `/mallManagement/productTypeDetail/${id}`
      })
    },
    updateRow: function (index) {
      let id = this.productTypes[index].id;
      this.$router.push({
        path: `/productType/addProductType/${id}`
      })
    },
    deleteRow: function (index) {
      this.$confirm('你确认要删除该分类吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        let id = this.productTypes[index].id;
        this.axios.delete("productType/" + id).then(res => {
            if (res.data.code == 200) {
              this.$message({
                type: 'success',
                message: '成功删除' + res.data.data + '条数据'
              });
              this.load();
            } else {
              this.$message({
                type: 'warn',
                message: '删除失败!'
              });
            }
          }
        )
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    add: function () {
      this.$router.push({
        path: `/mallManagement/addProductType`
      })
    },
    deleteMul: function () {
      if (this.multipleSelection.length == 0) {
        this.$message({
          type: 'info',
          message: '请选择需要删除的数据!'
        });
        return;
      }
      this.$confirm('你确认是否删除数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        let ids = [];
        this.multipleSelection.forEach(e => {
          ids.push(e.id);
        });
        this.axios.delete("productTyoe/mul?ids=" + ids).then(res => {
          if (res.data.code == 200) {
            this.$message({
              type: 'success',
              message: '删除成功'
            });
            this.load();
          } else {
            this.$message({
              type: 'warn',
              message: '删除失败'
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }

  }


}
</script>

<style scoped>

</style>
